<script setup>
import ClusterNamespaceSelector from './ClusterNamespaceSelector.vue';
const props = defineProps({
  showNamespace: {
    type: Boolean,
    default: true
  },
  clusterReadonly: {
    type: Boolean,
    default: false
  },
  namespaceReadonly: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['namespaceChanagedRollback','clusterChangedRollback'])
const  namespaceRollback = (clusterId, namespace) => {
  emits("namespaceChanagedRollback", clusterId, namespace)
}
const  clusterChangedRollback = (clusterId) => {
  emits("clusterChangedRollback", clusterId)
}
</script>

<template>
    <el-card>
        <template #header>
        <div class="auto-space-between">
            <!-- 左侧 -->
            <div>
                <ClusterNamespaceSelector
                    :cluster-readonly="props.clusterReadonly"
                    :namespace-readonly="props.namespaceReadonly"
                    :show-namespace="props.showNamespace"
                    @namespaceChangedRollback="namespaceRollback"
                    v-if="props.showNamespace"></ClusterNamespaceSelector>
                
                <ClusterNamespaceSelector
                    v-else="!props.show-namespace"
                    :cluster-readonly="props.clusterReadonly"
                    :show-namespace="props.showNamespace"
                    @clusterChangedRollback="clusterChangedRollback"
                    ></ClusterNamespaceSelector>
                <slot name="header"></slot>
            </div>
            <!-- 右侧 -->
            <div></div>
        </div>
        </template>
        <slot name="main"></slot>
    </el-card>
</template>

<style scoped>
</style>
